import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Select, Tree, TreeSelect, DatePicker, Checkbox, Tabs, InputNumber } from 'antd'
import _ from 'lodash'
import moment from 'moment'

import Ajax from 'lib/Ajax'
import { addConfig } from 'actions/config'
import { getNameByCode, download } from 'lib/fun'

const Option = Select.Option;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

// 新建编辑
class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
     rowdata: {},
     loading: false
    }
  }

  componentDidMount(){
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      
    }else if(!this.props.visible){
      if(nextProps.rowdata.id&&(!this.props.rowdata.id||this.props.rowdata.id != nextProps.rowdata.id)){
        this.loadFailMsg(nextProps.rowdata.id)
      }
    }
  }

  loadFailMsg = (id)=>{
    var self = this;
    if (this.state.loading||this.props.type != 'upload'||true) {
      return
    }
    this.setState({
      loading: true
    });
    Ajax({
      url: this.props.url,
      data: {
        id
      },
      success: function(data){
        if(data){
          self.setState({
            loading: false,
            rowdata: data
          });
        }else{
          self.setState({
            loading: false
          });
          message.error("加载失败");
        }
      },
      error: function(error){
        self.setState({
          loading: false
        });
        message.error(error);
      }
    });
  }

  onCancel = ()=>{
    this.setState({
      loading: false
    });
    this.props.onCancel();
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const formItemLayout2 = {
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
    };
    var { visible, type, rowdata, config } = this.props;

    var rowdata = Object.assign({}, rowdata, this.state.rowdata);
    return (<Modal 
              title="辖内人员信息"
              visible={visible}
              onOk={ this.onCancel } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
              width="720px"
              wrapClassName="no-margin"
            >
              <Spin spinning={this.state.loading}>
                <Form
                  horizontal
                >
                  <Row gutter={20}>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="记录ID">
                        { rowdata.id }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="导入批次id">
                        { rowdata.batchId }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="姓名">
                        { rowdata.name }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="姓名（藏）">
                        { rowdata.nameZw }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="证件类型">
                        { rowdata.identTypeName }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="证件号码">
                        { rowdata.identNumber }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="民族">
                        { rowdata.nationName }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="家庭地址">
                        { rowdata.address }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="家庭住址（藏）">
                        { rowdata.addressZw }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="电话号码">
                        { rowdata.telephone }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="行政区划名称">
                        { rowdata.areaName }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="是否户主">
                        { rowdata.isMaster?"是":"否" }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="与户主关系">
                        { rowdata.relationName }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="户口簿编号">
                        { rowdata.householdRegisterNumber }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="户主证件号码">
                        { rowdata.householdNumber }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="人员分类">
                        { rowdata.citizenInfoTypeName }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="户口类型">
                        { rowdata.houseHoldTypeName }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="所属银行">
                        { rowdata.bankName }
                      </FormItem>
                    </Col>
                    <Col span={8}>
                      <FormItem {...formItemLayout} label="银行卡号">
                        { rowdata.bankNumber }
                      </FormItem>
                    </Col>
                    <Col span={24}>
                      <FormItem {...formItemLayout2} label="处理失败原因">
                        { rowdata.failReason }
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Spin>
            </Modal>);
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addConfig }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(Edit))